<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="全局配置" name="MainConfig">
      <el-divider border-style="dashed" content-position="left">默认配置</el-divider>

      <el-form-item label="Api接口地址：">
        <el-input v-model="configValue.apiUrl"
                  :autosize="{ minRows: 1}"
                  :readonly="readonly" placeholder="请输入Api接口地址" type="textarea"/>
      </el-form-item>

      <el-form-item label="高德地图ApiKey：">
        <el-input v-model="configValue.gaodeMapApiKey"
                  :autosize="{ minRows: 1}"
                  :readonly="readonly" placeholder="请输入高德地图ApiKey" type="textarea"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">客户端标识校检配置</el-divider>

      <el-form-item label="校检客户标识：">
        <el-radio-group v-model="configValue.checkClientInfo">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
        <span class="tip">是否开启客户端头部文件校检</span>
      </el-form-item>

      <el-form-item label="客户异常日志：">
        <el-radio-group v-model="configValue.showClientInfoErrorLog">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">显示</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="开启调试日志：">
        <el-radio-group v-model="configValue.openDebugLog">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">显示</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="放行接口地址：">
        <el-input v-model="configValue.filterIgnoreUrls"
                  :autosize="{ minRows: 3}"
                  :readonly="readonly" placeholder="请输入无需校检的连接地址,每行一个" type="textarea"/>
        <span class="tip">全部放行输入值为: /** 或 ** , 如果已 /** 结尾将只匹配前缀是否满足</span>
      </el-form-item>

      <el-form-item label="标识错误提示：">
        <el-input v-model="configValue.clientInfoErrorTip"
                  :autosize="{ minRows: 1, maxRows: 4}"
                  :readonly="readonly" placeholder="请输入校检客户标识异常的提示" type="textarea"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">必须开启校检客户标识以下配置才生效</el-divider>

      <el-form-item label="访问次数限流：">
        <el-radio-group v-model="configValue.openRateLimiter">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
        <span class="tip">是否开启全局访问次数限流</span>
      </el-form-item>

      <el-form-item label="限流异常日志：">
        <el-radio-group v-model="configValue.showRateLimiterErrorLog">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">显示</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="每秒访问次数：">
        <el-input-number v-model="configValue.permitsPerSecond" :min="1" :precision="2" :step="0.01" controls-position="right"/>
        <span class="tip">每秒允许访问接口次数</span>
      </el-form-item>

      <el-form-item label="限流错误提示：">
        <el-input v-model="configValue.rateLimiterErrorTip"
                  :autosize="{ minRows: 1, maxRows: 4}"
                  :readonly="readonly" placeholder="请输入限流错误提示" type="textarea"/>
      </el-form-item>

    </el-tab-pane>

    <el-tab-pane label="版本配置" name="VersionConfig">
      <el-divider border-style="dashed" content-position="left">客户端版本号校检配置 必须开启 校检客户标识 才能生效</el-divider>

      <el-form-item label="版本号检测：">
        <el-radio-group v-model="configValue.openVersionCheck">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="显示错误日志：">
        <el-radio-group v-model="configValue.showVersionError">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="平台类型列表：">
        <el-input v-model="configValue.validPlatforms" placeholder="平台类型列表 多个用,分割"/>
        <span class="tip">平台类型列表 多个用,分割</span>
      </el-form-item>

      <el-form-item label="iOS版本号：">
        <el-input v-model="configValue.iosMinVersion" placeholder="iOS最低版本号"/>
      </el-form-item>

      <el-form-item label="Android版本号：">
        <el-input v-model="configValue.androidMinVersion" placeholder="Android最低版本号"/>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">App界面显示/隐藏配置 空值 或 App版本号 <= 配置版本 都会显示</el-divider>

      <el-form-item label="iOS版本号：">
        <el-input v-model="configValue.onlineIosVersion" placeholder="iOS版本号"/>
      </el-form-item>

      <el-form-item label="Android版本号：">
        <el-input v-model="configValue.onlineAndroidVersion" placeholder="Android版本号"/>
      </el-form-item>
    </el-tab-pane>

    <el-tab-pane label="特殊配置" name="SpecialConfig">
      <el-form-item label="余额支付：">
        <el-radio-group v-model="configValue.openCashPaymentMethod">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
        <span class="tip">是否开启余额支付方式</span>
      </el-form-item>

      <el-form-item label="余额图标：">
        <el-input v-model="configValue.paymentIconCash" :autosize="{ minRows: 1}" :readonly="readonly" placeholder="请输入或点击下方设置" type="textarea"/>
        <UploadImage v-model="configValue.paymentIconCash" :readonly="readonly" style="margin-top: 6px"/>
      </el-form-item>

      <!--      <el-form-item label="积分余额图标：">
              <el-input v-model="configValue.paymentIconIntegral" :autosize="{ minRows: 1}" :readonly="readonly" placeholder="请输入或点击下方设置" type="textarea"/>
              <UploadImage v-model="configValue.paymentIconIntegral" :readonly="readonly" style="margin-top: 6px"/>
            </el-form-item>-->

      <el-divider border-style="dashed" content-position="left">提现相关配置</el-divider>

      <el-form-item label="支付宝提现：">
        <el-radio-group v-model="configValue.openAlipayWithdraw">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="银行卡提现：">
        <el-radio-group v-model="configValue.openBankcardWithdraw">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="支付宝图标：">
        <el-input v-model="configValue.iconAlipay" :autosize="{ minRows: 1}" :readonly="readonly" placeholder="请输入或点击下方设置" type="textarea"/>
        <UploadImage v-model="configValue.iconAlipay" :readonly="readonly" style="margin-top: 6px"/>
      </el-form-item>

      <el-form-item label="银行卡图标：">
        <el-input v-model="configValue.iconBankcard" :autosize="{ minRows: 1}" :readonly="readonly" placeholder="请输入或点击下方设置" type="textarea"/>
        <UploadImage v-model="configValue.iconBankcard" :readonly="readonly" style="margin-top: 6px"/>
      </el-form-item>

    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { UploadImage } from '@/components/upload';

defineOptions({name: 'ServerConfig'})

const props = defineProps({
  configValue: {
    type: Object,
    required: true
  },
  configType: {
    type: Number,
    default: 0,
    required: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
});

const activeName = ref('MainConfig');
</script>

<style lang="scss" scoped>

</style>
